<template>
  <div class="ubBody wap">
    <div>
      <x-header  :left-options="{backText: ''}">
      </x-header>
    </div>
    <div class="loginBox main">

    <!--<x-header  :left-options="{backText: '',preventGoBack:true}" @on-click-back="goback"></x-header>-->
    <scroller>
      <!--<div>-->
        <!--<img src="./../../../assets/img/cart/back@2x.png" style="width:10px;height: 15px;margin: 14px;z-index: 1000"  @click="agreementInit()"/>-->
      <!--</div>-->
      <div class="logoBox">
        <img class="logoImg" src="./../../../assets/img/user/logo.png"/>
      </div>
      <div class="loginForm">
        <group>
          <x-input ref="phone"
                   title="手机号码"
                   :max="11"
                   keyboard="number"
                   v-model.trim="obj.phone.number"
                   name="phone"
                   placeholder="请输入11位电话号码"
                   :is-type="checkPhone"
                   >
          </x-input>
        </group>

        <group v-if="loginType==0">
          <x-input ref="code"
                   title="验证码"
                   keyboard="number"
                   v-model.trim="obj.code.value"
                   placeholder="新用户验证后自动注册"
                   name="code"
                   :min="4"
                   :max="4"
                   @on-change="inputCode"
                   class="weui-vcode">
            <x-button v-if="time==60" slot="right" type="primary" @click.native="getCode" :class="obj.phone.valid?'disable-btn':''" :disabled="obj.phone.valid||time!=60" mini>获取验证码</x-button>
            <x-button v-else slot="right" type="primary" mini>短信验证{{time}}S</x-button>
          </x-input>
        </group>

        <group v-if="loginType==1">
          <x-input ref="password"
                   title="密码"
                   :min="6"
                   type="password"
                   v-model.trim="obj.password.value"
                   name="password"
                   @on-change="inputPassword"
                   placeholder="请输入密码">
          </x-input>
        </group>

        <div class="flex-row-between">
          <div v-if="loginType==0" class="pw-login" @click="changeLoginType(1)">密码登录</div>
          <div v-if="loginType==1" class="pw-login" @click="changeLoginType(0)">验证码登录</div>
          <div class="pw-login" v-if="loginType==1" @click="forgetPass">忘记密码</div>
        </div>

        <!--<div >-->
          <!--<check-icon :value.sync="isAgree" type="plain">同意</check-icon>-->

          <!--&lt;!&ndash;<span class="redTip" @click="agreementInit()"></span>&ndash;&gt;-->
        <!--</div>-->
        <div v-show="hidshow" class="login" @click="login()" :class="obj.phone.valid||(obj.code.valid&&obj.password.valid)?'disable-btn':''">登录/注册</div>

        <div class="tipBox">
          <div>登录即代表您已同意</div>
          <div class="xieyi" @click="agreementInit()">《冻品掌柜用户注册协议和隐私政策》</div>
        </div>
      </div>
      <div style="height: 2rem;width: 100%;"></div>

    </scroller>

  </div>
  </div>
</template>
<!--<script src="./login.js"></script>-->
<script>
  import md5 from 'js-md5';
  import XImg from "vux/src/components/x-img/index";
  export default {
    name: "login",
    components: {XImg},
    data() {
      return {
        obj: {
          code: {
            value:'',
            valid:true
          },
          phone: {
            valid:true,
            number:''
          },
          password:{
            value:'',
            valid:true
          }
        },
        loginType:0, //登入方式0验证码 1密码
        time:60,//倒计时
        isAgree:true,
        hidshow:true
      }
    },
    methods: {
      agreementInit(){
        this.$router.push({ path:'/agreement'})
      },
      forgetPass(){
        this.$router.push({ path:'/forget/password'})
      },
      login(){
        if(this.loginType==0){//验证码登入
          if(!this.obj.phone.valid&&!this.obj.code.valid){
            if(!this.isAgree){
              this.$vux.toast.text("请同意用户注册协议和隐私政策", 'middle');
              return;
            }

            if(this.$route.query.sellerId&&(this.$route.query.sellerId+"").indexOf('?')!=-1){
              this.$route.query.sellerId=this.$route.query.sellerId.split('?')[0]
            }
            this.$ajax.post("user/login/code", {phone: this.obj.phone.number,code:this.obj.code.value,distributorId:this.$route.query.sellerId}, (res) => {
              // console.log(res)
              if(res.code==200){
                this.$storage.set('token',res.data);
                this.$storage.remove('address')
                // this.$router.push({ path:'/set/password'})
                this.$router.replace({path:'/purchase/storePage',query:{id:this.$route.query.sellerId}})
              }else{
                this.$vux.toast.text(res.msg, 'middle');              }
            });
          }
        }else{ //密码登入
          if(!this.obj.phone.valid&&!this.obj.password.valid){
            if(!this.isAgree){
              this.$vux.toast.text("请同意用户注册协议和隐私政策", 'middle');
              return;
            }
            if(this.$route.query.sellerId&&(this.$route.query.sellerId+"").indexOf('?')!=-1){
              this.$route.query.sellerId=this.$route.query.sellerId.split('?')[0]
            }
            this.$ajax.post("user/login/password", {phone: this.obj.phone.number,password:md5(this.obj.password.value),distributorId:this.$route.query.sellerId=='undefined'?'':this.$route.query.sellerId}, (res) => {
               console.log(res)
              if(res.code==200){
                this.$storage.set('token',res.data);
                this.$storage.remove('address')
                // this.$router.push({ path:'/set/password'})
                this.$router.replace({path:'/purchase/storePage',query:{id:this.$route.query.sellerId}})
              }else{
                this.$vux.toast.text(res.msg, 'middle');
              }
            });
          }
        }
      },
      inputPassword(val){
        if(val&&val.length>=6){
          this.obj.password.valid=false;
        }else{
          this.obj.password.valid=true;
        }
      },
      inputCode(val){
        // console.log(val)
        if(val&&val.length>3&&val.length<7){
          this.obj.code.valid=false;
        }else{
          this.obj.code.valid=true;
        }
      },
      changeLoginType(type){
        this.loginType=type;
        this.obj.code={
          alue:'',
          valid:true
        }
        this.obj.password={
          alue:'',
          valid:true
        }
      },
      checkPhone(value) {
        var reg = /^[1][0-9]{10}$/;
        if (reg.test(value)) {
          this.obj.phone.valid=false;
          return {valid: true}
        } else {
          this.obj.phone.valid=true;
          return {valid: false, msg: "手机号格式错误"}
        }
      },
      save() {

      },
      //倒计时
      timer() {
        if(this.timerInit){
          clearInterval(this.timerInit);
        }
        this.time = 60;
        this.timerInit = setInterval(() => {
          this.time--;
          if (this.time < 1) {
            this.showType=true;
            this.time = 60;
            this.isSend = false;
            clearInterval(this.timerInit);
            return false;
          }
        }, 1000)
      },

      getCode() {
        if(this.isSend) return;
        this.obj.phone.valid=true
        setTimeout(()=>{
          this.obj.phone.valid=false
        },2000)
        // console.log("q111")
        if (this.obj.phone){
          if(this.$refs.phone.valid==true){
            this.isSend = true;
            this.$ajax.post("system/sms/login", {phone: this.obj.phone.number}, (res) => {
              // console.log(res)
              if(res.code==200){
                this.timer()
              }else{
                this.isSend = false;
                this.$vux.toast.text(res.msg, 'middle');
              }
            });
          }else{
            this.$vux.toast.text("手机号格式有误", 'middle');
          }
        }else{
          this.$vux.toast.text("手机号不能为空", 'middle');
        }
      }
    },
    mounted: function () {
      console.log("mounted")
      const ua = window.navigator.userAgent;
      if (ua.indexOf('Android') > -1) {
        const docmHeight = document.body.clientHeight;// 默认屏幕高度
        window.onresize = () => {
          var nowHeight = document.body.clientHeight;// 实时屏幕高度
          if (docmHeight !== nowHeight) {
            this.hidshow = false;
          } else {
            this.hidshow = true;
          }
        };
      }
    }
  }

</script>
<style lang="less" scoped>
  /*@import "./login.less";*/
  .loginheader{
    background-color: #fff !important;
  }
  .flex-row-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .tipBox{
    position: relative;
    /*width: 100%;*/
    /*bottom:20px;*/
    margin-top: 1rem;
    text-align: center;
    /*margin-left: -.4rem;*/
    .xieyi{
      color:#56D0E3
    }
  }

  .disable-btn{
    opacity: 0.5;
  }

  .loginBox {
    /*position: absolute;*/
    /*width: 100%;*/
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
    /*padding: 0rem .4rem;*/

    .logoBox {
      text-align: center;

      .logoImg {
        margin-top: 1.87rem;
        display: inline-block;
        width: 1.91rem;
      }
    }

    .loginForm {
      flex:1;
      margin-top: 2rem;
      margin-left: .4rem;
      margin-right: .4rem;
      /*padding-right: .4rem;*/
      /*padding-left: .4rem;*/

      /deep/ .weui-cells {
        margin-top: 0;
        font-size: 0.32rem;
        line-height: 0px;

        .weui-cell {
          padding: 0.3rem 0rem;

        }

        .weui-input {
          color: #333;
          font-size: 0.3rem;
        }
      }

      /deep/ .weui-cells:before {
        display: none;
      }

      /deep/ .weui-cells:after {
        border-bottom: 1px solid rgba(235, 235, 235, 1);
      }

      /deep/ .weui-label {
        width: 1.35rem !important;
        display: inline-block;
        text-align: justify;
        text-align-last: justify;
        margin-right: .65rem;
        font-size: .32rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      /deep/ .weui-label:after {
        width:100%;
        display: inline-block;
        content: '';
      }

      /deep/ input::-webkit-input-placeholder {
        color: #ddd;
        font-size: 0.32rem;
      }

      /deep/ input:-moz-placeholder {
        color: #ddd;
        font-size: 0.3rem;
      }

      /deep/ input:-ms-input-placeholder {
        color: #ddd;
        font-size: 0.3rem;
      }

      /deep/ .weui-btn {
        /*border: 0px;*/
        color: rgba(253, 179, 118, 1);
        padding: 0px;
        font-size: .26rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        border: none;
        background-color: transparent;
        outline: none;
      }

      /deep/ .weui-btn:after {
        border: none;
      }


      .login {
        margin-top: .9rem;
        background: rgba(82, 125, 217, 1);
        box-shadow: 0rem .18rem .35rem .0rem rgba(82, 125, 217, 0.15);
        border-radius: .46rem;
        padding: .3rem;
        text-align: center;
        font-size: .34rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }

      .pw-login {
        margin-top: .6rem;
        font-size: .28rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(142, 145, 159, 1);
      }

    }
  }

</style>

